<script setup lang="ts" name="CCGamePage_Slot">
import { reactive } from "vue";
const games = reactive([
  { id: 111, name: "自由幻想" },
  { id: 222, name: "我的世界" },
  { id: 333, name: "传奇" },
  { id: 444, name: "天龙八部" },
  { id: 555, name: "一刀999" },
]);
</script>

<template>
  <div class="bg-sky-200 p-6 my-6 rounded-lg shadow-lg min-w-52">
    <h2 class="text-lg bg-orange-200 font-semibold py-1 text-center mb-3">
      游戏列表
    </h2>
    <slot :games="games" foo="bar" x="123">
      <ul class="list-disc pl-4">
        <li v-for="g in games" :key="g.id" class="p-1 even:bg-sky-300">
          {{ g.name }}
        </li>
      </ul>
    </slot>
  </div>
</template>
